<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
      /**
       * 绘制图片
       * ctx.drawImage(img, x, y, width, height): 在画布上绘制图像、画布或视频
       * img: 要绘制的图像、画布或视频
       * x: 绘制图像、画布或视频的左上角在画布上的 x 坐标
       * y: 绘制图像、画布或视频的左上角在画布上的 y 坐标
       * width: 绘制图像、画布或视频的宽度
       * height: 绘制图像、画布或视频的高度
       * 注意： 如果指定宽高， 最好成比例缩放，否则会变形
       * 设置高 = 原高 * (设置宽 / 原宽)
       * 
       * ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): 图片裁剪，并在画布上定位被裁剪的部分
       * sx: 剪切的 x 坐标
       * sy: 剪切的 y 坐标
       * sWidth: 剪切的宽度
       * sHeight: 剪切的高度
       * dx: 绘制图像的 x 坐标
       * dy: 绘制图像的 y 坐标
       * dWidth: 绘制图像的宽度
       * dHeight: 绘制图像的高度
      */
      const myCanvas = document.getElementById("myCanvas");
      const ctx = myCanvas.getContext("2d");

      var img = new Image();
      img.src = "https://www.runoob.com/try/demo_source/paris.jpg";
      img.onload = function() {
        /**
         * 原图的宽度400，原图的高度300
         * 绘制的宽度200，绘制的高度=原高 * (设置宽 / 原宽) = 300 * (200 / 400) = 150
        */
        ctx.drawImage(img, 20, 20, 200, 150);
        /**
         * 剪切的x坐标，剪切的y坐标指的是相对于图片的坐标
         * 剪切的宽度，剪切的高度指的是相对于图片的坐标
         * 绘制的x坐标，绘制的y坐标指的是相对于画布的坐标
         * 绘制的宽度，绘制的高度指的是相对于画布的坐标
        */
        ctx.drawImage(img, 200, 150, 200, 150, 20, 20, 100, 75)
      };
    </script>
  </body>
</html>